<template>
	<view class="container">
		<view class="index-header">
			<view class="header_addr">
				<image src="/static/image/Index/addr-icon.png" mode="" class="addr_icon"></image>
				<span class="addr_txt" @click="$helper.to('/pages/tabBar/index/chooseCity')">{{citys}}</span>
				<image src="/static/image/Index/down-icon.png" mode="" class="down_icon"></image>
			</view>
			<view class="header_search">
				<image src="/static/image/Index/index-search.png" mode="" @click="switchSearch" class="search_icon">
				</image>
				<image src="/static/image/Index/filter-icon.png" mode="" @click="showPopup" class="filter_icon"></image>
			</view>
		</view>

		<!-- 导航 -->
		<view class="index-tabs">
			<view class='active' v-for="(item,index) in tabList" :key="index">
				<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="tab-content">
			<view v-if="currentTab==0">
				<view class="content_List">
					<noData style="margin: 0 auto;" v-if="expertList.length < 1" :ndText="'暂无兴趣数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in expertList" :key="index">
						<image :src="item.avatar" mode="" @click="infoMsg(item)" class="model_img"></image>
						<span class="model_time">2小时前在线</span>
						<view class="model_info">
							<view class="info_name">{{item.user_nickname}}</view>
							<view class="info_group">
								<image v-if="item.gender==2" src="/static/image/Index/girl-icon.png" mode=""
									class="genderimg"></image>
								<image v-else src="/static/image/Index/boy-icon.png" mode="" class="boyimg"></image>
								<view class="agetext">{{item.age}} {{item.horoscope}} </view>
							</view>
							<image src="/static/image/Index/VIP-icon.png" v-if="item.vip==true" @click="openVip" mode=""
								class="vipimg">
							</image>
						</view>
						<view class="littmemodel" v-if="item.images.length>0">
							<image v-for="(ite,index) in item.images.slice(0,5)" :key="index" :src="ite" mode=""
								class="littleimg">
							</image>
							<view v-if="item.images.length>5" class="extranum">
								+{{ (item.images.length)-5}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab==1">
				<view class="content_List">
					<noData style="margin: 0 auto;" v-if="expertList.length < 1" :ndText="'暂无星选数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in expertList" :key="index">
						<image :src="item.avatar" mode="" @click="infoMsg(item)" class="model_img"></image>
						<span class="model_time">2小时前在线</span>
						<view class="model_info">
							<view class="info_name">{{item.user_nickname}}</view>
							<view class="info_group">
								<image v-if="item.gender==2" src="/static/image/Index/girl-icon.png" mode=""
									class="genderimg"></image>
								<image v-else src="/static/image/Index/boy-icon.png" mode="" class="boyimg"></image>
								<view class="agetext">{{item.age}} {{item.horoscope}} </view>
							</view>
							<image src="/static/image/Index/VIP-icon.png" v-if="item.vip==true" @click="openVip" mode=""
								class="vipimg">
							</image>
						</view>
						<view class="littmemodel" v-if="item.images.length>0">
							<image v-for="(ite,index) in item.images.slice(0,5)" :key="index" :src="ite" mode=""
								class="littleimg">
							</image>
							<view v-if="item.images.length>5" class="extranum">
								+{{ (item.images.length)-5}}
							</view>
						</view>
					</view>

				</view>
			</view>
			<view v-if="currentTab==2">
				<view class="active-loading">
					<view class="activetext">
						<view style="font-size:28rpx;font-weight: 500;">正在活跃</view>
						<view style="display: flex;align-items: center;" @click="changeList">
							<image src="/static/image/Index/index-switch.png" mode="" class="activeimg"></image>
							<view class="switchTXT">换一批</view>
						</view>
					</view>
					<view class="active_list">
						<scroll-view scroll-x="true" style="white-space:nowrap;">
							<noData style="margin: 0 auto;" v-if="activeList.length < 1" :ndText="'暂无推荐数据'"></noData>
							<view v-else class="activing" v-for="(item,index) in activeList" :key="index">
								<image :src="item.avatar" mode="" class="active_img"></image>
								<image src="/static/image/Index/index-zaixian.png" mode="" class="activezx"></image>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="content_List">
					<noData style="margin: 0 auto;" v-if="activeList.length < 1" :ndText="'暂无语音互动数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in expertList" :key="index">
						<image :src="item.avatar" @click="infoMsg(item)" mode="" class="model_img"></image>
						<span class="model_time">2小时前在线</span>
						<view class="model_info">
							<view class="info_name">{{item.user_nickname}}</view>
							<view class="info_group">
								<image v-if="item.gender==2" src="/static/image/Index/girl-icon.png" mode=""
									class="genderimg"></image>
								<image v-else src="/static/image/Index/boy-icon.png" mode="" class="boyimg"></image>
								<view class="agetext">{{item.age}} {{item.horoscope}} </view>
							</view>
							<image src="/static/image/Index/VIP-icon.png" v-if="item.vip==true" @click="openVip" mode=""
								class="vipimg">
							</image>
						</view>
						<view class="littmemodel" v-if="item.images.length>0">
							<image v-for="(ite,index) in item.images.slice(0,5)" :key="index" :src="ite" mode=""
								class="littleimg">
							</image>
							<view v-if="item.images.length>5" class="extranum">
								+{{ (item.images.length)-5}}
							</view>
						</view>
					</view>


				</view>
			</view>
			<view v-if="currentTab==3">
				<view class="content_List">
					<view class="content_modeltell" v-for="(item,index) in activeList" :key="index">
						<image :src="item.avatar" mode="" class="model_img" @click="infoMsg(item)"></image>
						<span class="model_time">{{item.mutual_times}}次互动</span>
						<view class="model_info">
							<view class="info_name">{{item.user_nickname}}</view>
							<view class="info_group">
								<image src="/static/image/Index/girl-icon.png" mode="" class="genderimg"></image>
								<view class="agetext">{{item.age}} {{item.horoscope}}</view>
							</view>
							<image src="/static/image/Index/VIP-icon.png" v-if="item.vip==1" @click="openVip" mode=""
								class="vipimg">
							</image>
						</view>
						<view class="tellmodel">
							<view class="tellnum">
								<image src="/static/image/Index/index-jifen.png" mode=""></image>
								{{item.mutual_score}}/分钟
							</view>
							<view class="tellTa" @click="popupTell">呼叫TA</view>
						</view>
					</view>


				</view>

				<view class="normaltxt"> 没有更多了~ </view>
			</view>

		</view>

		<!-- 筛选 弹框-->
		<uni-popup ref="popup" type="top" :mask-click="true">
			<view class="popup-content">
				<!-- 普通筛选 -->
				<view class="commFilter" @click="changeOpenColl">
					<view class="filterTxt"> 普通筛选</view>
					<image v-if="!showColl" src="/static/image/Index/index-filter-left.png" class="leftFilter" mode="">
					</image>
					<image v-else style='transform:rotate(90deg);' src="/static/image/Index/index-filter-left.png"
						class="leftFilter" mode=""></image>
				</view>
				<!-- 普通筛选选项 -->
				<view class="collContent" v-if="showColl">
					<view class="title">性别 </view>
					<view class="list-box">
						<view class="list-box-item" :class="currentOne == index ? 'active' : ''"
							v-for="(item,index) in genderList1" :key="index" @click="changeOne(index)">
							<!-- <image :src="item.url" mode="" style="width:28rpx;height:28rpx;"></image> -->
							<view style="margin-left:8rpx;"> {{item.name}}</view>
						</view>
					</view>

					<view class="title">年龄 </view>
					<view class="list-box">
						<view class="list-box-item" :class="currentTwo == index ? 'active' : ''"
							v-for="(item,index) in genderList2" :key="index" @click="changeTwo(index)">
							<view style="margin-left:8rpx;"> {{item}}</view>
						</view>
					</view>
					<view class="title">距离 </view>
					<view class="list-box">
						<view class="list-box-item" :class="currentThree == index ? 'active' : ''"
							v-for="(item,index) in genderList3" :key="index" @click="changeThree(index)">
							<view style="margin-left:8rpx;"> {{item}}</view>
						</view>
					</view>
				</view>
				<!-- 高级筛选 -->
				<view class="commFilter" @click="changeOpenCollHigh">
					<view class="filterTxt">
						<view>高级筛选</view>
						<image src="/static/image/Index/VIP-icon.png" mode=""
							style="width:54rpx;height:28rpx;margin-left:14rpx;">
						</image>
					</view>
					<image v-if="!showCollHigh" src="/static/image/Index/index-filter-left.png" class="leftFilter"
						mode="">
					</image>
					<image v-else style='transform:rotate(90deg);' src="/static/image/Index/index-filter-left.png"
						class="leftFilter" mode=""></image>
				</view>
				<!-- 高级筛选选项 -->
				<view class="collContent" v-if="showCollHigh">
					<!-- 星座 -->
					<view class="highTitle ">
						<view>星座</view>
						<label class="radio">
							<radio value="r1" color="#000" @click="checkedXing" style="transform:scale(0.7);"
								:checked="checkBuXing" />不限
						</label>
					</view>
					<view class="list-box">
						<view class="xingtuBox" v-for="(item,index) in xingzuoList" @click="changeXingTU(index)"
							:class="currentXingTU == index ? 'boxImged' : ''" :key="index">
							<image :src="item" mode="" class="boxImg"></image>
						</view>
					</view>
					<!-- 用户筛选 -->
					<!-- 			<view class="highTitle ">
						<view>用户筛选</view>
						<label class="radio">
							<radio value="r1" color="#000" @click="checkedUser" style="transform:scale(0.7);"
								:checked="checkBuUser" />不限
						</label>
					</view>
					<view class="list-box">
						<view class="list-box-item" :class="currentUser == index ? 'active' : ''" v-for="(item,index) in genderUser"
							:key="index" @click="changeUser(index)">
							<view style="margin-left:8rpx;"> {{item}}</view>
						</view>
					</view> -->
					<!-- 列表排序 -->
					<view class="title">列表排序 </view>
					<view class="list-box">
						<view class="list-box-item" :class="currentPai == index ? 'active' : ''"
							v-for="(item,index) in genderPai" :key="index" @click="changePai(index)">
							<view style="margin-left:8rpx;"> {{item}}</view>
						</view>
					</view>
					<!-- 兴趣爱好 -->
					<view class="highTitle ">
						<view>兴趣爱好</view>
						<label class="radio">
							<radio value="r1" color="#000" @click="checkedQU" style="transform:scale(0.7);"
								:checked="checkBuQU" />不限
						</label>
					</view>
					<view class="list-box">
						<view class="list-box-item" :class="currentQU == index ? 'active' : ''"
							v-for="(item,index) in genderQU" :key="index" @click="changeQU(index)">
							<view style="margin-left:8rpx;"> {{item}}</view>
						</view>
					</view>
				</view>
				<view class="sibmut">
					<view class="confrim" @click="handleChooseExpertList">确定</view>
					<view class="reset" @click="handleReset">重置</view>
				</view>
			</view>
		</uni-popup>

		<!-- 充值弹框 -->
		<uni-popup class="select_popup" ref="popupVipWxNum" :mask-click="true" type="center">
			<view class="wxNumVipPopup">
				<view class="seeWX">余额不足</view>
				<view class="wxVipNumtxt">
					此次呼叫将消耗 <image src="/static/image/Index/index-jifen.png" mode=""></image> 300/分钟，您的余额不足，
					无法发起通话
				</view>
				<view class="book_btn">
					<view class="bookclose" @click="closeVipWxNum">取消</view>
					<view class="booksubBuy" @click="rechargePoint">充值</view>
				</view>
			</view>
		</uni-popup>
		<!-- 呼叫弹框 -->
		<uni-popup class="select_popup" ref="popupTellWxNum" :mask-click="true" type="center">
			<view class="wxTellNumPopup">
				<view class="seeWX">语音互动确认</view>
				<view class="wxTellNumtxt">
					此次呼叫将消耗 <image src="/static/image/Index/index-jifen.png" mode=""></image>300/分钟，为营造良
					好的语音互动环境，请您保持文明友好的沟通，是否确认发起呼叫？

				</view>
				<view class="book_btn">
					<view class="bookclose" @click="closeTellWxNum">取消</view>
					<view class="booksubBuy">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import uniPopup from "@/components/uniapp-components/uni-popup/uni-popup.vue"
	import noData from '@/components/ben-components/notData/notData.vue'
	export default {
		components: {
			noData
		},
		data() {
			return {
				citys: '郑州市',
				currentTab: 0,
				tabList: [{
						name: '兴趣',
						value: 0
					},
					{
						name: '星选',
						value: 1
					},
					{
						name: '推荐',
						value: 2
					},
					{
						name: '语音互动',
						value: 3
					},
				],
				//达人列表
				expertList: [],
				//语音互动列表
				activeList: [],
				littleList: [
					'/static/image/Index/small1.png',
					'/static/image/Index/small1.png',
					'/static/image/Index/small1.png',
					'/static/image/Index/small1.png',
					'/static/image/Index/small1.png',
					'/static/image/Index/small1.png',
				],
				showColl: true,
				// 列表1
				currentOne: 2,
				//性别
				gender: '',
				genderList1: [{
						name: '男性',
						url: '/static/image/Index/nan.png'
					},
					{
						name: '女性',
						url: '/static/image/Index/nv.png'
					},
					{
						name: '不限',
						url: '/static/image/Index/buxian.png'
					},
				],
				currentTwo: 4,
				genderList2: ['18-28', '28-38', '38-48', '48-58', '不限'],
				currentThree: 5,
				genderList3: ['0-5km', '5-10km', '10-20km', '20-50km', '50-100km', '不限'],
				showCollHigh: false,
				checkBuXing: true,
				checkBuUser: false,
				checkBuQU: true,
				xingzuoList: [
					'/static/image/Index/index-shuiping.png',
					'/static/image/Index/index-shuangyu.png',
					'/static/image/Index/index-baiyang.png',
					'/static/image/Index/index-jinniu.png',
					'/static/image/Index/index-shuangzi.png',
					'/static/image/Index/index-juxie.png',
					'/static/image/Index/index-shizi.png',
					'/static/image/Index/index-chunv.png',
					'/static/image/Index/index-tiancheng.png',
					'/static/image/Index/index-tianxie.png',
					'/static/image/Index/index-sheshou.png',
					'/static/image/Index/index-mojie.png',
				],
				currentUser: -1,
				genderUser: ['星选优先', '会员用户', '兴趣优先'],
				currentPai: -1,
				genderPai: ['系统推荐', '距离优先', '新人优先'],
				currentQU: -1,
				genderQU: ['才艺表演', '游戏电竞', '聊天唠嗑'],
				currentXingTU: -1,
				//判断分页
				isReach: false,
				pageNum: 1,
				listNum: '',

			};
		},
		onShow() {
			this.getUserInfo();
			this.getCitys(); //获取当前城市经纬度
			this.getExpertList()
		},
		onLoad(options) {
			uni.$on('citys', data => {
				this.citys = data.city
			})

		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					if (res.code == '1') {
						this.userInfo = res.data;
						this.user = res.user
						uni.setStorage({
							key: 'userInfo',
							data: res.data
						})
						uni.setStorage({
							key: 'user',
							data: res.user
						})
					} else if (res.code == '-201') {
						this.$helper.to('/pages/views/login/login')
					}
				})
			},
			//获取兴趣列表
			getExpertList() {
				let params = {
					type: 'interest',
					page: 1,
					list_rows: 10,
					city: this.citys,
					// keyword:'',
					// gender:'',
					// min_age:'',
					// max_age:'',
					// min_distance:'',
					// max_distance:'',
					// sort:'',
					// order:'',
					// label:'',
					// horoscope:''
				}
				this.$http.getHomeList(params).then(res => {
					if (res.code === 1) {
						this.expertList = res.data.data

					} else {
						this.$helper.toast('none', res.msg);
					}
				})
			},

			handleChooseExpertList() {
				let params = {
					page: 1,
					list_rows: 10,
					city: this.citys,
				}
				if (this.currentOne == 2) {
					params.gender = ''
				} else {
					params.gender = this.currentOne + 1
				}
				if (this.currentTab == 0) {
					params.type = 'interest';
				} else if (this.currentTab == 1) {
					params.type = 'star';
				} else if (this.currentTab == 2) {
					params.type = 'recommend';
				}
				if (this.currentTwo == 0) {
					params.min_age = 18
					params.max_age = 28
				} else if (this.currentTwo == 1) {
					params.min_age = 28
					params.max_age = 38
				} else if (this.currentTwo == 2) {
					params.min_age = 38
					params.max_age = 48
				} else if (this.currentTwo == 3) {
					params.min_age = 48
					params.max_age = 58
				} else {
					params.min_age = ''
					params.max_age = ''
				}

				if (this.currentThree == 0) {
					params.min_distance = 0
					params.max_distance = 5
				} else if (this.currentThree == 1) {
					params.min_distance = 5
					params.max_distance = 10
				} else if (this.currentThree == 2) {
					params.min_distance = 10
					params.max_distance = 20
				} else if (this.currentThree == 3) {
					params.min_distance = 20
					params.max_distance = 50
				} else if (this.currentThree == 4) {
					params.min_distance = 50
					params.max_distance = 100
				} else {
					params.min_distance = ''
					params.max_distance = ''
				}

				if (this.currentXingTU == 0) {
					params.horoscope = '水瓶座'
				} else if (this.currentXingTU == 1) {
					params.horoscope = '双鱼座'
				} else if (this.currentXingTU == 2) {
					params.horoscope = '白羊座'
				} else if (this.currentXingTU == 3) {
					params.horoscope = '金牛座'
				} else if (this.currentXingTU == 4) {
					params.horoscope = '双子座'
				} else if (this.currentXingTU == 5) {
					params.horoscope = '巨蟹座'
				} else if (this.currentXingTU == 6) {
					params.horoscope = '狮子座'
				} else if (this.currentXingTU == 7) {
					params.horoscope = '处女座'
				} else if (this.currentXingTU == 8) {
					params.horoscope = '天秤座'
				} else if (this.currentXingTU == 9) {
					params.horoscope = '天蝎座'
				} else if (this.currentXingTU == 10) {
					params.horoscope = '射手座'
				} else if (this.currentXingTU == 11) {
					params.horoscope = '摩羯座'
				} else {
					params.horoscope = ''
				}

				if (this.currentPai == 0) {
					params.sort = 'sort'
				} else if (this.currentPai == 1) {
					params.sort = 'distance'
				} else if (this.currentPai == 2) {
					params.sort = 'create_time'
				} else {
					params.sort = ''
				}
				if (this.currentQU == -1) {
					params.label = ''
				} else {
					params.label = this.genderQU[this.currentQU]
				}
				// console.log(params)
				this.expertList = []
				this.$http.getHomeList(params).then(res => {
					if (res.code === 1) {
						this.expertList = res.data.data
						this.$refs.popup.close();
					} else {
						this.$helper.toast('none', res.msg);
					}
				})

			},
			//筛选重置
			handleReset() {
				this.currentOne = 2
				this.currentTwo = 4
				this.currentThree = 5
				this.checkBuXing = true
				this.checkBuQU = true
				this.currentQU = -1
				this.currentPai = -1
				let params = {
					page: 1,
					list_rows: 10,
					city: this.citys,
				}
				if (this.currentTab == 0) {
					params.type = 'interest';
				} else if (this.currentTab == 1) {
					params.type = 'star';
				} else if (this.currentTab == 2) {
					params.type = 'recommend';
				}
				this.expertList = []
				this.$http.getHomeList(params).then(res => {
					if (res.code === 1) {
						this.expertList = res.data.data
						this.$refs.popup.close();
					} else {
						this.$helper.toast('none', res.msg);
					}
				})
			},

			//获取经纬度
			getCitys() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('经纬度:', res.longitude, res.latitude);
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							data: {
								key: '2XGBZ-IG5R5-QZVIR-IG26D-6F3R3-5SBNT', // 需在腾讯位置服务申请
								location: `${res.latitude},${res.longitude}` // 纬度,经度
							},
							success: (res) => {
								const city = res.data.result.address_component.city;
								console.log('城市:', city);
							}
						});
					},
					fail: (err) => {
						console.error('定位失败:', err);
					}
				});
			},
			switchTab(index) {
				this.currentTab = index;
				if (index == 0) {
					this.pageNum = 1
					this.expertList = []
					let params = {
						type: 'interest',
						page: 1,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							this.expertList = res.data.data
							if (this.expertList.length < 10) {
								this.isReach = true
							} else {
								this.isReach = false
							}


						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				}
				if (index == 1) {
					this.pageNum = 1
					this.expertList = []
					let params = {
						type: 'star',
						page: 1,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							this.expertList = res.data.data
							if (this.expertList.length < 10) {
								this.isReach = true
							} else {
								this.isReach = false
							}
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				}
				if (index == 2) {
					this.pageNum = 1
					this.expertList = []
					let params = {
						type: 'recommend',
						page: 1,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							this.expertList = res.data.data
							if (this.expertList.length < 10) {
								this.isReach = true
							} else {
								this.isReach = false
							}
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
					this.activeList = []
					this.$http.getHomeActiceList({}).then(res => {
						if (res.code === 1) {
							this.activeList = res.data
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				}
				if (index == 3) {
					this.pageNum = 1
					this.activeList = []
					let params = {}
					this.$http.getHomeActiceList(params).then(res => {
						if (res.code === 1) {
							this.activeList = res.data
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				}
			},
			//换一批
			changeList() {
				// this.activeList = []
				let params = {}
				this.$http.getHomeActiceList(params).then(res => {
					if (res.code === 1) {
						this.activeList = res.data
					} else {
						this.$helper.toast('none', res.msg);
					}
				})
			},
			onChange(e) {
				this.currentTab = e.detail.current;
			},
			switchSearch() {
				this.$helper.to('/pages/tabBar/index/search')
			},
			// 打开顶部弹出框
			showPopup() {
				this.$refs.popup.open();
			},
			popupTell() {
				this.$refs.popupVipWxNum.open()
				// this.$refs.popupTellWxNum.open() 
			},
			closeVipWxNum() {
				this.$refs.popupVipWxNum.close()

			},
			closeTellWxNum() {
				this.$refs.popupTellWxNum.close()
			},
			changeOpenColl() {
				this.showColl = !this.showColl
			},
			changeOne(e) {
				this.currentOne = e;
				this.gender = e + 1
			},
			changeTwo(e) {
				this.currentTwo = e;
			},
			changeThree(e) {
				this.currentThree = e;
			},
			changeUser(e) {
				this.currentUser = e;
			},
			changePai(e) {
				this.currentPai = e;
			},
			changeQU(e) {
				this.currentQU = e;
				if (this.currentQU > -1) {
					this.checkBuQU = false
				}
			},
			changeXingTU(e) {
				this.currentXingTU = e;
				if (this.currentXingTU > -1) {
					this.checkBuXing = false
				}
			},
			changeOpenCollHigh() {
				if (this.userInfo.vip == true) {
					this.showCollHigh = !this.showCollHigh
				} else {
					uni.showModal({
						title: '提示',
						content: '抱歉，高级筛选为VIP独享。是否开通VIP？',
						confirmColor: "#000000",
						cancelColor: "#999999",
						success: (res) => {
							if (res.confirm) {
								this.$helper.to('/pages/views/openVip/openVip')
							}
						}
					})
				}
				// this.showCollHigh = !this.showCollHigh
			},

			checkedXing(e) {
				this.checkBuXing = !this.checkBuXing
				if (this.checkBuXing == true) {
					this.currentXingTU = -1
				}
			},
			checkedUser() {
				this.checkBuUser = !this.checkBuUser
			},
			checkedQU() {
				this.checkBuQU = !this.checkBuQU
				if (this.checkBuQU == true) {
					this.currentQU = -1
				}

			},

			//跳转详情页
			infoMsg(val) {
				let userId = val.id
				this.$helper.to('/pages/tabBar/index/indexInfo?id=' + userId)
			},

			rechargePoint() {
				this.$refs.popupVipWxNum.close()
				this.$helper.to('/pages/tabBar/index/rechargePoint')

			},
			openVip() {
				this.$helper.to('/pages/views/openVip/openVip')
			},


		},
		//上拉加载更多 分页
		onReachBottom() {
			if (this.isReach == true) {
				return
			} else {
				let pageNum = this.pageNum + 1
				if (this.currentTab == 0) {
					let params = {
						type: 'interest',
						page: pageNum,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							let expertList = res.data.data
							let listNum = res.data.total;
							if (expertList.length < 10) {
								this.isReach = true
							}
							this.expertList = this.expertList.concat(expertList);
							this.pageNum = pageNum
							this.listNum = listNum
							if (this.listNum == this.expertList.length) {
								this.isReach = true
							}
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				} else if (this.currentTab == 1) {
					let pageNum = this.pageNum + 1
					let params = {
						type: 'star',
						page: pageNum,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							let expertList = res.data.data
							let listNum = res.data.total;
							if (expertList.length < 10) {
								this.isReach = true
							}
							this.expertList = this.expertList.concat(expertList);
							this.pageNum = pageNum
							this.listNum = listNum
							if (this.listNum == this.expertList.length) {
								this.isReach = true
							}
						} else {
							this.$helper.toast('none', res.msg);
						}
					})

				} else if (this.currentTab == 2) {
					let pageNum = this.pageNum + 1
					let params = {
						type: 'recommend',
						page: pageNum,
						list_rows: 10,
					}
					this.$http.getHomeList(params).then(res => {
						if (res.code === 1) {
							let expertList = res.data.data
							let listNum = res.data.total;
							if (expertList.length < 10) {
								this.isReach = true
							}
							this.expertList = this.expertList.concat(expertList);
							this.pageNum = pageNum
							this.listNum = listNum
							if (this.listNum == this.expertList.length) {
								this.isReach = true
							}
						} else {
							this.$helper.toast('none', res.msg);
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.select_popup {
		z-index: 9999;
		width: 100%;

		// 充值信号
		.wxNumVipPopup {
			background-color: #fff;
			width: 600rpx;
			height: 352rpx;
			border-radius: 30rpx;

			.seeWX {
				font-size: 32rpx;
				color: #000;
				text-align: center;
				padding-top: 40rpx;
			}

			.wxVipNumtxt {
				width: 482rpx;
				height: 124rpx;
				font-size: 28rpx;
				text-align: center;
				color: #666;
				margin: 0 auto;
				margin-top: 48rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.book_btn {
				display: flex;
				align-items: center;
				height: 96rpx;
				border-top: 1px solid #f8f8f8;

				.bookclose {
					width: 300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color: #999;
					text-align: center;
					border-right: 1px solid #f8f8f8;
				}

				.booksubBuy {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 299rpx;
					height: 96rpx;
					color: #000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		// 呼叫
		.wxTellNumPopup {
			background-color: #fff;
			width: 600rpx;
			height: 389rpx;
			border-radius: 30rpx;

			.seeWX {
				font-size: 32rpx;
				color: #000;
				text-align: center;
				padding-top: 40rpx;
			}

			.wxTellNumtxt {
				width: 482rpx;
				height: 161rpx;
				font-size: 28rpx;
				text-align: center;
				color: #666;
				margin: 0 auto;
				margin-top: 48rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.book_btn {
				display: flex;
				align-items: center;
				height: 96rpx;
				border-top: 1px solid #f8f8f8;

				.bookclose {
					width: 300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color: #999;
					text-align: center;
					border-right: 1px solid #f8f8f8;
				}

				.booksubBuy {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 299rpx;
					height: 96rpx;
					color: #000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}



	}

	.container {
		padding: 30rpx 10rpx 30rpx 30rpx;

		.index-header {
			display: flex;
			justify-content: space-between;
		}

		.header_addr {
			display: flex;
			align-items: center;

			.addr_icon {
				width: 24rpx;
				height: 32rpx;
			}

			.addr_txt {
				font-size: 26rpx;
				margin: 0 12rpx;
				color: #000;
			}

			.down_icon {
				width: 14rpx;
				height: 10rpx;
			}
		}

		.header_search {
			display: flex;
			align-items: center;

			.search_icon {
				width: 31rpx;
				height: 34rpx;
				margin-right: 30rpx;
			}

			.filter_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.index-tabs {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
		}

		.active {
			font-size: 32rpx;
			margin-right: 40rpx;

		}

		.texted {
			font-size: 40rpx;
		}

		.active-loading {
			margin-top: 44rpx;
			margin-right: 20rpx;
		}

		.activetext {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.activeimg {
			width: 30rpx;
			height: 24rpx;
		}

		.switchTXT {
			font-size: 24rpx;
			color: #999999;
			margin-left: 10rpx;
		}

		.active_list {
			margin: 30rpx 0;
		}

		.activing {
			position: relative;
			display: inline-block;
			margin-right: 24rpx;
			width: 128rpx;
			height: 128rpx;
		}

		.active_img {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;

		}

		.activezx {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.tab-content {
			margin-top: 40rpx;
		}

		.content_List {
			display: flex;
			flex-wrap: wrap;
		}

		.content_model {
			position: relative;
			height: 420rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.model_img {
				width: 335rpx;
				height: 420rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}

			.model_time {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				text-align: center;
				// width: 150rpx;
				// line-height: 40rpx;
				// height: 40rpx;
				padding: 8rpx 10rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
				color: #ffffff;
				background: rgba(0, 0, 0, 0.6);
			}

			.model_info {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 80rpx;
				left: 12rpx;
				font-weight: 500;
			}

			.info_name {
				width: 96rpx;
				font-size: 32rpx;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info_group {
				display: flex;
				align-items: center;
				// width: 142rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-left: 12rpx;

				.genderimg {
					width: 13rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}

				.agetext {
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 28rpx;
					margin-left: 8rpx;
				}
			}

			.vipimg {
				width: 54rpx;
				height: 28rpx;
				margin-left: 8rpx;
			}

			.littmemodel {
				position: absolute;
				bottom: 12rpx;
				left: 12rpx;
				display: flex;
				align-items: center;
				height: 56rpx;

				.littleimg {
					width: 55rpx;
					height: 55rpx;
					margin-right: 10rpx;
					border-radius: 8rpx;
				}

				.extranum {
					width: 55rpx;
					height: 55rpx;
					border-radius: 8rpx;
					background: rgba(0, 0, 0, 0.3);
					color: #fff;
					text-align: center;
					line-height: 55rpx;
					position: absolute;
					right: 10rpx;
				}
			}
		}

		.content_modeltell {
			position: relative;
			height: 500rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;

			.model_img {
				width: 335rpx;
				height: 420rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}

			.model_time {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				text-align: center;
				padding: 8rpx 10rpx;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
				color: #ffffff;
				background: rgba(0, 0, 0, 0.6);
			}

			.model_info {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 88rpx;
				left: 12rpx;
				font-weight: 500;
			}

			.tellmodel {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 16rpx;

				.tellnum {
					display: flex;
					align-items: center;
					color: #000;
					font-size: 24rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

				.tellTa {
					width: 124rpx;
					height: 48rpx;
					text-align: center;
					line-height: 48rpx;
					color: #fff;
					font-size: 24rpx;
					background: #000;
					border-radius: 24rpx;
				}
			}

			.info_name {
				width: 96rpx;
				font-size: 32rpx;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.info_group {
				display: flex;
				align-items: center;
				// width: 142rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-left: 12rpx;

				.genderimg {
					width: 13rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}


				.agetext {
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 28rpx;
					margin-left: 8rpx;
				}
			}


			.vipimg {
				width: 54rpx;
				height: 28rpx;
				margin-left: 8rpx;
			}

		}

		.boyimg {
			width: 16rpx;
			height: 16rpx;
			margin-left: 8rpx;
		}

		.normaltxt {
			text-align: center;
			font-size: 28rpx;
			color: rgba(153, 153, 153, 1);
			margin: 86rpx 0
		}

		//筛选内容		
		.popup-content {
			background: #fff;
			height: 1050rpx;
			width: 100%;
			border-radius: 0 0 10px 10px;
			overflow-y: auto;
			margin-top: 90rpx;

			.commFilter {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				background-color: #f8f8f8;
				height: 76rpx;
				border-bottom: 1px solid #fff;
			}

			.filterTxt {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #999;
			}

			.leftFilter {
				width: 12rpx;
				height: 22rpx;
			}

			// 筛选内容
			.collContent {
				padding: 40rpx 0rpx 24rpx 30rpx;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 45rpx;
				}

				.list-box {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 30rpx;

					.list-box-item {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 210rpx;
						height: 72rpx;
						background: #f8f8f8;
						border-radius: 10rpx;
						line-height: 56rpx;
						font-size: 26rpx;
						margin-right: 30rpx;
						margin-top: 24rpx;
						color: #666;
					}

					.active {
						background: #000000;
						width: 210rpx;
						height: 72rpx;
						color: #fff;
					}
				}

				.highTitle {
					display: flex;
					justify-content: space-between;
					margin-right: 30rpx;
				}

				.boxImg {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					z-index: 45;
				}

				.xingtuBox {
					width: 156rpx;
					height: 156rpx;
					margin-top: 24rpx;
					margin-right: 24rpx;
					border-radius: 10rpx;
				}

			}

			.boxImged {
				border: 4rpx solid #000;
				z-index: 50;
			}

			// 筛选提交按钮
			.sibmut {
				display: flex;
				align-items: center;
				margin: 30rpx;

				.confrim {
					width: 466rpx;
					height: 90rpx;
					background: #000;
					color: #FEC92F;
					font-size: 32rpx;
					text-align: center;
					line-height: 90rpx;
					border-radius: 12rpx 0rpx 0rpx 12rpx;
				}

				.reset {
					width: 224rpx;
					height: 90rpx;
					border: 2rpx solid #000;
					font-size: 32rpx;
					text-align: center;
					line-height: 90rpx;
					border-radius: 0rpx 12rpx 12rpx 0rpx;
				}
			}

		}


	}
</style>